/**
 * Created by Administrator on 2017/5/9.
 */
function PiChart(option){
    this._init(option)
}

PiChart.prototype = {
    contructor:PiChart,
    _init :function (option) {
        this.option = option || {};
        //圆心
        this.x = option.x ||0;
        this.y = option.y ||0;
        //半径
        this.innerRadius = option.innerRadius ||0;
        this.outerRadius = option.outerRadius ||0;
        //外圆描边颜色
        this.outerColors = option.outerColors||"black";
        //外圆边框宽度
        this.outerWidth = option.outerWidth||0;
        //内圆数据
        this.dateArray = option.dateArray ||[];
        //动画索引
        this.animationIndex = 0;
    },

    render:function(layer){
        //备份指针
        var self = this;
        //创建总组
        this.group = new Konva.Group({
            x:0,
            y:0
        });
        //将组添加到层中
        layer.add(this.group);

        //创建存放扇形的组
        this.wedg = new Konva.Group({
            x:0,
            y:0
        });
        //将组添加到层中
        layer.add(this.wedg);

        //创建外圆
        var outerCircle = new Konva.Circle({
            x:this.x,
            y:this.y,
            radius: this.outerRadius,
            stroke: this.outerColors,
            strokeWidth: this.outerWidth
        });
        //添加到组
        this.group.add(outerCircle);

        //创建内圆扇区
        var beignAngle = -90;
        //遍历数组取出每个扇形的角度
        this.dateArray.forEach(function(item,index){
            var tempAgle = item.value*360;
            //创建扇形区
            var wedg = new Konva.Wedge({
              x:self.x,
              y:self.y,
              radius:self.innerRadius,
              fill:item.color,
              angle: tempAgle,//扇形的角度
              rotation: beignAngle //扇形的起始角度
            });
            //添加进组
            self.wedg.add(wedg);

            //创建文字
            var textAngle = (beignAngle+tempAgle*0.5)*Math.PI/180;
            var textX = self.x+(self.outerRadius+20)*Math.cos(textAngle);
            var textY = self.y+(self.outerRadius+20)*Math.sin(textAngle);
            var text = new Konva.Text({
                x: textX,
                y: textY,
                text: item.value*100+"%",
                fontSize: 18,
                fill:item.color
            });

            //特殊处理
            if(textAngle>1/2*Math.PI&&textAngle<=3/2*Math.PI){
                //text.x()-text.width()向左移文字的宽度
                text.x(text.x()-text.width())
            }
            //添加进组
            self.group.add(text);

            //绘制区域组
             var areaW = 60,areH = 20;
             var areaX = self.x +self.outerRadius + 90;
             var areaY = self.y + index*(areH+10);
            var rect = new Konva.Rect({
                x: areaX,
                y: areaY,
                width: areaW,
                height: areH,
                fill: item.color
            });

            //添加进组
            self.group.add(rect);

            //区域文字
            var text = new Konva.Text({
                x: areaX+areaW+20,
                y: areaY,
                text: item.name,
                fontSize: 18,
                fill:item.color
            });
            self.group.add(text);
            //更新位置
            beignAngle = tempAgle+beignAngle;

        });
        console.log(self.group.getChildren());
    },

    animation : function(){
        //保存指针
        var self = this;
        //判断当第一次调用的时候角度归零
        if(this.animationIndex ==0 ){
            // 初始状态，获取所有的扇形,设置初始角度都为0
            this.wedg.getChildren().forEach(function (item,index) {
                item.angle(0);
            });
        }

        //结束状态
        var wedg = this.wedg.getChildren()[this.animationIndex];
        //获取扇形
        wedg.to({
            angle : this.dateArray[this.animationIndex].value*360,
            duration : this.dateArray[this.animationIndex].value,//1s钟做完运动，每个占的秒数就是自身比例
            onFinish:function(){
                self.animationIndex+=1;
                if(self.animationIndex >= self.dateArray.length){
                    self.animationIndex =0;
                    return;
                }
                self.animation();
            },

        })

    }

};